<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="webjars/bootstrap/css/bootstrap.css" rel="stylesheet">
    <script src="/webjars/jquery/jquery.js"></script>
    <script src="/webjars/bootstrap/js/bootstrap.js"></script>
    <script src="/js/holder.min.js"></script>

    <style>
    img
    {
        position:absolute;
        left:0px;
        top:0px;
    }




    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div id="page1" class="col-md-4 thumbnail">
            <div id="img1-1" class="thumbnail">
                <img data-src="holder.js/1000x1000/auto/#777:#555/text:1 page">
            </div>
            <div id="img1" class="thumbnail">
                <img data-src="holder.js/1000x1000/auto/#333:#555/text:1 page">
            </div>
            </ul>
        </div>
        <div id="page2" class="col-md-4 thumbnail">
            <div id="img2-2" class="thumbnail">
                <img data-src="holder.js/1000x1000/auto/#777:#555/text:1 page">
            </div>
            <div id="img2" class="thumbnail">
                <img data-src="holder.js/1000x1000/auto/#333:#555/text:1 page">
            </div>
        </div>
        <div id="page3" class="col-md-4 thumbnail">
            <div id="img3-3" class="thumbnail">
                <img data-src="holder.js/1000x1000/auto/#777:#555/text:1 page">
            </div>
            <div id="img3" class="thumbnail">
                <img data-src="holder.js/1000x1000/auto/#333:#555/text:1 page">
            </div>
        </div>
    </div>
</div>
</body>
<script>
$(document).ready(function(){
  $("#img1").hide();
  $("#img2").hide();
  $("#img3").hide();
  $("#page1").mouseenter(function(){
    $("#img1").show();
  });
  $("#page1").mouseleave(function(){
    $("#img1").hide();
  });
  $("#page2").mouseenter(function(){
    $("#img2").show();
  });
  $("#page2").mouseleave(function(){
    $("#img2").hide();
  });
  $("#page3").mouseenter(function(){
    $("#img3").show();
  });
  $("#page3").mouseleave(function(){
    $("#img3").hide();
  });
});








</script>
</html>